<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关系选择器</title>
	</head>
	<body>
		<style>
			
			ul>li{
				float: left;
				list-style: none;
				padding: 10px;
			}
			
			.fd{
				display: none;
			}
			li:hover>.fd{
				display:block;
				background-color: #666666;
			}
			dl{
				display: none;
			}
			li:hover>dl{
				display:block;
			}
		</style>
		<ul>
			<li>
				lis1
				<dl class="fd">
					<li>VUE</li>
					<li>REACT</li>
				</dl>
			</li>
			<li>lis2</li>
			<li>lis3</li>
			<li>lis4</li>
			<li>lis5</li>
		</ul>
		<ul>
			<li>
				1
				<dl>
					<li>aaa</li>
					<li>bbb</li>
				</dl>
			</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<!--------------------------------------------->
		<style type="text/css">
			input:checked+span{
				font-size: 20px;
			}
			input[type="checkbox"]{
				display: none;
			}
		</style>
		<!--相邻选择器-->
		<label>
			<input type="checkbox" />
			<span>
				点击文字放大为20px
			</span>
		</label>
		<!--属性选择器-->
		<style type="text/css">
			input[type="radio"]:active+span{
				font-size: 20px;
			}
		</style>
		<input type="radio" />
		<span>
			点击文字放大为20px
		</span>
		<!--兄弟选择器-->
		<!--.base下面兄弟P标签字体颜色改为skyblue-->
	<style type="text/css">
		p~p{
			color:skyblue;
		}
	</style>
			<p>我是0第个p标签</p>
		<div class="base">
			base
		<!--p{我是$第个p标签}*5-->
			<p>我是1第个p标签</p>
			<p>我是2第个p标签</p>
			<p>我是3第个p标签</p>
			<p>我是4第个p标签</p>
			<p>我是5第个p标签</p>
		</div>
	</body>
</html>
